<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第1课 算法与问题解决</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .flowchart-step {
            transition: all 0.3s ease;
        }
        .flowchart-step.active {
            transform: scale(1.05);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .vote-btn:hover {
            transform: translateY(-2px);
        }

        /* 代码语法高亮样式 */
        .code-keyword { color: #7c3aed; font-weight: bold; } /* 紫色 - 关键字 */
        .code-variable { color: #2563eb; } /* 蓝色 - 变量 */
        .code-string { color: #16a34a; } /* 绿色 - 字符串 */
        .code-function { color: #ea580c; } /* 橙色 - 函数 */
        .code-comment { color: #6b7280; font-style: italic; } /* 灰色 - 注释 */
        .code-operator { color: #000000; } /* 黑色 - 运算符 */
        .code-number { color: #dc2626; } /* 红色 - 数字 */

        /* 流程图样式 */
        .flowchart-container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            min-height: 800px;
        }

        .flowchart-node {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            @apply text-gray-700 border-2 border-gray-500;
            margin: 10px 0;
            min-width: 120px;
            min-height: 50px;
            position: relative;
            z-index: 2;
        }

        .start-node {
            @apply bg-green-100 border-green-500 rounded-full text-green-800;
        }

        .end-node {
            @apply bg-red-100 border-red-500 rounded-full text-red-800;
        }

        .process-node {
            @apply bg-blue-100 border-blue-500 rounded-lg text-blue-800;
        }

        .decision-node {
            @apply bg-yellow-100 border-yellow-500 rounded-lg text-yellow-800;
            transform: rotate(45deg);
            width: 80px;
            height: 80px;
        }

        .decision-node div {
            transform: rotate(-45deg);
        }

        .result-node {
            @apply bg-emerald-100 border-emerald-500 rounded-lg text-emerald-800;
        }

        .flowchart-line {
            @apply bg-gray-500;
            position: relative;
            z-index: 1;
        }

        .vertical-line {
            width: 2px;
            height: 40px;
        }

        .horizontal-line {
            height: 2px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .left-line {
            width: 80px;
            left: -90px;
        }

        .right-line {
            width: 80px;
            right: -90px;
        }

        .merge-line {
            width: 2px;
            height: 60px;
        }

        .loop-line {
            width: 200px;
            height: 2px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: -20px;
        }

        /* 箭头样式 */
        .flowchart-line::after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 6px solid #6b7280;
        }

        .vertical-line::after {
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
        }

        .horizontal-line::after {
            top: 50%;
            transform: translateY(-50%);
            right: -4px;
            border-left: 6px solid #6b7280;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
        }

        .left-line::after {
            right: -6px;
            border-left: 6px solid #6b7280;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
        }

        .loop-line::after {
            top: 50%;
            transform: translateY(-50%);
            right: -6px;
            border-left: 6px solid #6b7280;
            border-top: 4px solid transparent;
            border-bottom: 4px solid transparent;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 导航栏占位符 -->
    <div class="h-20"></div>

    <!-- 导航栏 -->
    <nav id="mainNav" class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-700 shadow-2xl overflow-hidden transition-all duration-300">
        <!-- 装饰性背景图案 -->
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-10"></div>
            <div class="absolute -top-10 -right-10 w-32 h-32 bg-white rounded-full opacity-10"></div>
            <div class="absolute -bottom-10 -left-10 w-24 h-24 bg-white rounded-full opacity-10"></div>
        </div>

        <div class="relative max-w-6xl mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <!-- 左侧：课程信息 -->
                <div class="flex items-center space-x-4">
                    <!-- 学科标识 -->
                    <div class="flex items-center space-x-3">
                        <div class="bg-white bg-opacity-20 backdrop-blur-sm text-white px-4 py-2 rounded-lg font-bold text-sm">
                            信息科技
                        </div>
                    </div>
                    <!-- 分隔线 -->
                    <div class="h-8 w-px bg-white bg-opacity-30"></div>
                    <!-- 课程标题 -->
                    <div>
                        <h1 class="text-2xl font-bold text-white mb-1">第1课 算法与问题解决</h1>
                    </div>
                </div>

                <!-- 中间：标签栏 -->
                <div class="flex-1 flex justify-center mx-8">
                    <nav class="flex rounded-xl overflow-hidden shadow divide-x divide-blue-100 bg-white bg-opacity-20 backdrop-blur-sm text-white font-medium text-base border border-white border-opacity-30" id="tabBar">
                        <button class="px-6 py-2 focus:outline-none tab-btn tab-active bg-white bg-opacity-30 text-blue-800" data-tab="tab1">学习内容</button>
                        <button class="px-6 py-2 focus:outline-none tab-btn" data-tab="tab2">练习</button>
                    </nav>
                </div>

                <!-- 右侧：年级信息 -->
                <div class="flex items-center space-x-3">
                    <div class="bg-white bg-opacity-20 backdrop-blur-sm px-4 py-2 rounded-lg">
                        <span class="text-white font-semibold text-sm">六年级上册</span>
                    </div>

                    <!-- 进度指示器 -->
                    <div class="hidden md:flex items-center space-x-2">
                        <div class="text-blue-100 text-sm">本课学习进度</div>
                        <div class="w-16 h-2 bg-white bg-opacity-20 rounded-full overflow-hidden">
                            <div class="h-full bg-gradient-to-r from-green-400 to-blue-400 rounded-full transition-all duration-300 ease-out" style="width: 75%"></div>
                        </div>
                        <div class="text-white text-sm font-medium">75%</div>
                    </div>
                </div>
            </div>

            <!-- 底部装饰线 -->
            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-white to-transparent opacity-30"></div>
        </div>
    </nav>



    <!-- Tab1: 学习内容 -->
    <div id="tab1" class="tab-content">
    <!-- 主要内容区域 -->
    <div class="max-w-6xl mx-auto px-4 py-8">
        <!-- 学习目标 -->
        <section class="mb-12 bg-gradient-to-br from-blue-100 to-indigo-50 rounded-xl shadow-md p-6 border border-blue-100">
            <h2 class="text-2xl font-bold text-blue-800 mb-4 flex items-center">
                <svg xmlns=" http://www.w3.org/2000/svg " class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
                你将学习
            </h2>
            <p class="text-lg text-gray-700 mb-4">在计算机中运用算法解决问题的一般步骤。</p>
        </section>

        <!-- 互动投票实验 -->
        <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden">
            <div class="bg-blue-600 text-white p-6">
                <h2 class="text-2xl font-bold flex items-center">
                    <svg xmlns=" http://www.w3.org/2000/svg " class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                    投票问题模拟实验
                </h2>
                <p class="mt-2">体验算法解决问题的过程：全校学生为两个候选校徽设计方案投票</p>
            </div>
            
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- 投票界面 -->
                    <div class="bg-gray-50 p-6 rounded-lg">
                        <h3 class="text-xl font-semibold text-gray-800 mb-4">投票界面</h3>
                        <div class="mb-6">
                            <p class="text-gray-600 mb-3">请选择你喜欢的作品：</p>
                            <div class="flex space-x-4">
                                <button id="voteA" class="vote-btn flex-1 bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-lg transition transform">
                                    投票给A作品
                                </button>
                                <button id="voteB" class="vote-btn flex-1 bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg transition transform">
                                    投票给B作品
                                </button>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <div class="flex justify-between items-center mb-2">
                                <span class="font-medium">A作品票数：</span>
                                <span id="votesA" class="text-2xl font-bold text-blue-600">0</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-4 mb-4">
                                <div id="progressA" class="bg-blue-600 h-4 rounded-full" style="width: 0%"></div>
                            </div>
                            
                            <div class="flex justify-between items-center mb-2">
                                <span class="font-medium">B作品票数：</span>
                                <span id="votesB" class="text-2xl font-bold text-green-600">0</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-4">
                                <div id="progressB" class="bg-green-600 h-4 rounded-full" style="width: 0%"></div>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <button id="resetVotes" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg transition">
                                重新开始投票
                            </button>
                        </div>

                        <!-- 投票结果显示 -->
                        <div id="result" class="mt-6 p-4 bg-green-50 rounded-lg hidden">
                            <h4 class="font-semibold text-green-800 mb-2">投票结果</h4>
                            <p id="resultText" class="text-green-700"></p>
                        </div>

                        <!-- 思考问题 -->
                        <div id="thinkingQuestion" class="mt-6 p-4 bg-yellow-50 rounded-lg hidden">
                            <h4 class="font-semibold text-yellow-800 flex items-center mb-3">
                                <svg xmlns=" http://www.w3.org/2000/svg " class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                </svg>
                                思考问题
                            </h4>
                            <div class="text-sm text-yellow-700">
                                <p class="mb-3"><strong>问题：</strong>如果有3个作品参与投票，算法需要怎么调整？</p>

                                <!-- 输入框 -->
                                <div class="mb-4">
                                    <textarea id="algorithmAnswer" rows="6" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500 focus:border-transparent resize-none" placeholder="请描述一下如果有3个作品参与投票，算法需要做哪些调整..."></textarea>
                                </div>

                                <!-- 提交按钮 -->
                                <div class="mb-4">
                                    <button id="submitAnswer" class="bg-yellow-600 hover:bg-yellow-700 text-white px-6 py-2 rounded-lg font-medium transition-colors">
                                        提交答案
                                    </button>
                                </div>

                                <!-- 提示区域 -->
                                <div id="hintSection" class="bg-white p-3 rounded border-l-4 border-yellow-400 hidden">
                                    <p class="text-sm text-blue-800 font-medium">
                                        <strong>💡 提示：</strong>在脑海中想象一下，如果有3个候选作品，算法流程图会变成什么样子？
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 算法步骤 -->
                    <div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-4">算法解决步骤</h3>
                        <div class="space-y-4">
                            <div id="step1" class="flowchart-step p-4 border-l-4 border-blue-500 bg-blue-50 rounded-r-lg">
                                <h4 class="font-semibold">步骤1: 初始化变量</h4>
                                <p class="text-sm text-gray-600 mt-1">将变量a与b的值初始化赋为0</p>
                                <div class="mt-2 text-xs bg-white p-2 rounded font-mono">
                                    <span class="code-variable">a</span> <span class="code-operator">=</span> <span class="code-number">0</span><span class="code-operator">,</span> <span class="code-variable">b</span> <span class="code-operator">=</span> <span class="code-number">0</span>
                                </div>
                            </div>
                            
                            <div id="step2" class="flowchart-step p-4 border-l-4 border-blue-500 bg-blue-50 rounded-r-lg">
                                <h4 class="font-semibold">步骤2: 获取投票输入</h4>
                                <p class="text-sm text-gray-600 mt-1">投票者输入投票内容"a"或"b"</p>
                                <div class="mt-2 text-xs bg-white p-2 rounded font-mono">
                                    <span class="code-variable">tp</span> <span class="code-operator">=</span> <span class="code-function">input</span><span class="code-operator">(</span><span class="code-string">"选择A或B"</span><span class="code-operator">)</span>
                                </div>
                            </div>
                            
                            <div id="step3" class="flowchart-step p-4 border-l-4 border-blue-500 bg-blue-50 rounded-r-lg">
                                <h4 class="font-semibold">步骤3: 处理投票数据</h4>
                                <p class="text-sm text-gray-600 mt-1">使用分支结构判断投票内容</p>
                                <div class="mt-2 text-xs bg-white p-2 rounded font-mono">
                                    <span class="code-keyword">if</span> <span class="code-variable">tp</span> <span class="code-operator">==</span> <span class="code-string">"a"</span><span class="code-operator">:</span><br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="code-variable">a</span> <span class="code-operator">=</span> <span class="code-variable">a</span> <span class="code-operator">+</span> <span class="code-number">1</span><br>
                                    <span class="code-keyword">else</span><span class="code-operator">:</span><br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="code-variable">b</span> <span class="code-operator">=</span> <span class="code-variable">b</span> <span class="code-operator">+</span> <span class="code-number">1</span>
                                </div>
                            </div>
                            
                            <div id="step4" class="flowchart-step p-4 border-l-4 border-blue-500 bg-blue-50 rounded-r-lg">
                                <h4 class="font-semibold">步骤4: 循环投票过程</h4>
                                <p class="text-sm text-gray-600 mt-1">重复步骤2-3直到所有投票完成</p>
                                <div class="mt-2 text-xs bg-white p-2 rounded font-mono">
                                    <span class="code-keyword">while</span> <span class="code-variable">votes</span> <span class="code-operator"><</span> <span class="code-variable">total_votes</span><span class="code-operator">:</span><br>
                                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="code-comment"></span># 执行投票步骤</span>
                                </div>
                            </div>
                            
                            <div id="step5" class="flowchart-step p-4 border-l-4 border-blue-500 bg-blue-50 rounded-r-lg">
                                <h4 class="font-semibold">步骤5: 输出投票结果</h4>
                                <p class="text-sm text-gray-600 mt-1">显示A和B作品的最终票数</p>
                                <div class="mt-2 text-xs bg-white p-2 rounded font-mono">
                                    <span class="code-function">print</span><span class="code-operator">(</span><span class="code-string">"A作品:"</span><span class="code-operator">,</span> <span class="code-variable">a</span><span class="code-operator">,</span> <span class="code-string">"票"</span><span class="code-operator">)</span><br>
                                    <span class="code-function">print</span><span class="code-operator">(</span><span class="code-string">"B作品:"</span><span class="code-operator">,</span> <span class="code-variable">b</span><span class="code-operator">,</span> <span class="code-string">"票"</span><span class="code-operator">)</span>
                                </div>
                            </div>
                        </div>
                        

                    </div>
                </div>
            </div>
        </section>

        <!-- 核心概念 -->
        <section class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">核心概念</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- 问题分析 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-blue-100 p-4">
                        <h3 class="font-semibold text-blue-600 flex items-center">
                            <svg xmlns=" http://www.w3.org/2000/svg " class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            问题分析
                        </h3>
                    </div>
                    <div class="p-4">
                        <p class="text-gray-700">
                            解决问题首先要对问题进行分析，抽象出关键要素。在投票问题中，关键要素包括：
                        </p>
                        <ul class="mt-2 list-disc pl-5 space-y-1 text-gray-600">
                            <li>两个候选作品的编号（A和B）</li>
                            <li>学生的投票情况</li>
                            <li>总投票人数</li>
                        </ul>
                    </div>
                </div>
                
                <!-- 抽象与建模 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-green-100 p-4">
                        <h3 class="font-semibold text-green-700 flex items-center">
                            <svg xmlns=" http://www.w3.org/2000/svg " class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
                            </svg>
                            抽象与建模
                        </h3>
                    </div>
                    <div class="p-4">
                        <p class="text-gray-700">
                            在抽象的基础上，总结规律、建立模型是设计算法的前提：
                        </p>
                        <ul class="mt-2 list-disc pl-5 space-y-1 text-gray-600">
                            <li>用变量tp表示每一次的投票</li>
                            <li>用变量a和b表示两个作品的得票数</li>
                            <li>建立投票处理的规则模型</li>
                        </ul>
                        <div class="mt-3 p-2 bg-gray-100 rounded text-xs font-mono">
                            <span class="code-keyword">if</span> <span class="code-variable">tp</span> <span class="code-operator">==</span> <span class="code-string">"a"</span><span class="code-operator">:</span> <span class="code-variable">a</span> <span class="code-operator">=</span> <span class="code-variable">a</span> <span class="code-operator">+</span> <span class="code-number">1</span><br>
                            <span class="code-keyword">if</span> <span class="code-variable">tp</span> <span class="code-operator">==</span> <span class="code-string">"b"</span><span class="code-operator">:</span> <span class="code-variable">b</span> <span class="code-operator">=</span> <span class="code-variable">b</span> <span class="code-operator">+</span> <span class="code-number">1</span>
                        </div>
                    </div>
                </div>
                
                <!-- 算法设计 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="bg-purple-100 p-4">
                        <h3 class="font-semibold text-purple-700 flex items-center">
                            <svg xmlns=" http://www.w3.org/2000/svg " class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                            </svg>
                            算法设计
                        </h3>
                    </div>
                    <div class="p-4">
                        <p class="text-gray-700">
                            设计算法时要确定输入与输出，并合理选择控制结构：
                        </p>
                        <ul class="mt-2 list-disc pl-5 space-y-1 text-gray-600">
                            <li>输入：用户投票选择（a或b）</li>
                            <li>输出：两个作品的最终票数</li>
                            <li>控制结构：循环和分支结构</li>
                        </ul>
                        <div class="mt-3 text-xs text-gray-500">
                            算法流程图展示了解决问题的步骤顺序
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 算法流程图 -->
        <section class="mb-12 bg-white rounded-xl shadow-md p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">投票算法流程图</h2>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- 左侧：流程图图片 -->
                <div class="flex justify-center">
                    <div class="max-w-2xl mx-auto">
                        <img src="img/6-1_1_1.jpg" alt="投票算法流程图" class="w-3/4 h-auto rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-shadow" id="flowchartImage">
                    </div>
                </div>

                <!-- 右侧：算法步骤说明 -->
                <div class="bg-gray-50 p-6 rounded-lg">
                    <h3 class="text-xl font-semibold text-gray-800 mb-4">投票算法步骤说明</h3>
                    <div class="text-gray-700 leading-relaxed">
                        <p class="mb-4">投票算法可以描述为如下几个步骤：</p>

                        <div class="space-y-3">
                            <div class="flex items-start">
                                <span class="inline-flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-sm font-bold rounded-full mr-3 flex-shrink-0">1</span>
                                <p>A、B作品得票数清零，即将变量a与b的值初始化赋为0；</p>
                            </div>

                            <div class="flex items-start">
                                <span class="inline-flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-sm font-bold rounded-full mr-3 flex-shrink-0">2</span>
                                <p>投票者输入投票内容"a"或"b"，并将其赋值给变量tp；</p>
                            </div>

                            <div class="flex items-start">
                                <span class="inline-flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-sm font-bold rounded-full mr-3 flex-shrink-0">3</span>
                                <p>使用分支结构对投票内容进行判断，当tp为"a"时，变量a的数值加1，当tp为"b"时，变量b的数值加1；</p>
                            </div>

                            <div class="flex items-start">
                                <span class="inline-flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-sm font-bold rounded-full mr-3 flex-shrink-0">4</span>
                                <p>使用循环结构重复步骤2、3，直到1000名学生都完成投票；</p>
                            </div>

                            <div class="flex items-start">
                                <span class="inline-flex items-center justify-center w-6 h-6 bg-blue-500 text-white text-sm font-bold rounded-full mr-3 flex-shrink-0">5</span>
                                <p>输出A，B作品的得票数。</p>
                            </div>
                        </div>

                        <!-- 思考问题 -->
                        <div class="mt-6 p-4 bg-yellow-50 rounded-lg border-l-4 border-yellow-400">
                            <h4 class="font-semibold text-yellow-800 flex items-center mb-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                                思考问题
                            </h4>
                            <p class="text-yellow-700 font-medium">
                                流程图中 变量 i 是什么意思？
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图片放大模态框 -->
            <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 hidden z-50 flex items-center justify-center p-4">
                <div class="relative max-w-4xl max-h-[90vh] w-full">
                    <img src="img/6-1_1_1.jpg" alt="投票算法流程图" class="w-full h-auto max-h-[85vh] object-contain rounded-lg" id="modalImage">
                    <button id="closeModal" class="absolute -top-3 -right-3 bg-white rounded-full p-2 shadow-lg hover:bg-gray-100 transition-colors">
                        <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </section>

        <!-- 总结 -->
        <section class="relative bg-gradient-to-br from-blue-600 via-purple-600 to-green-600 text-white rounded-2xl shadow-2xl overflow-hidden">
            <!-- 装饰性背景图案 -->
            <div class="absolute inset-0 opacity-10">
                <div class="absolute top-10 left-10 w-20 h-20 bg-white rounded-full"></div>
                <div class="absolute top-32 right-16 w-16 h-16 bg-white rounded-full"></div>
                <div class="absolute bottom-20 left-1/4 w-12 h-12 bg-white rounded-full"></div>
                <div class="absolute bottom-10 right-10 w-24 h-24 bg-white rounded-full"></div>
            </div>

            <div class="relative p-8">
                <!-- 标题区域 -->
                <div class="text-center mb-8">
                    <div class="inline-flex items-center justify-center w-16 h-16 bg-white bg-opacity-20 rounded-full mb-4">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <h2 class="text-3xl font-bold mb-2">学习总结</h2>
                    <p class="text-blue-100 text-lg">通过本课学习，我们了解了在计算机中运用算法解决问题的一般步骤</p>
                </div>

                <!-- 步骤卡片网格 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                    <div class="group bg-white bg-opacity-10 backdrop-blur-sm p-6 rounded-xl border border-white border-opacity-20 hover:bg-opacity-20 transition-all duration-300 hover:transform hover:scale-105 hover:shadow-xl">
                        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mb-4 group-hover:scale-110 transition-transform duration-300">
                            <span class="text-xl font-bold text-white">1</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2 text-blue-100">问题分析</h3>
                        <p class="text-blue-200 leading-relaxed">明确问题要素和需求</p>
                    </div>

                    <div class="group bg-white bg-opacity-10 backdrop-blur-sm p-6 rounded-xl border border-white border-opacity-20 hover:bg-opacity-20 transition-all duration-300 hover:transform hover:scale-105 hover:shadow-xl">
                        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full mb-4 group-hover:scale-110 transition-transform duration-300">
                            <span class="text-xl font-bold text-white">2</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2 text-purple-100">抽象与建模</h3>
                        <p class="text-purple-200 leading-relaxed">建立问题模型和规则</p>
                    </div>

                    <div class="group bg-white bg-opacity-10 backdrop-blur-sm p-6 rounded-xl border border-white border-opacity-20 hover:bg-opacity-20 transition-all duration-300 hover:transform hover:scale-105 hover:shadow-xl">
                        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-full mb-4 group-hover:scale-110 transition-transform duration-300">
                            <span class="text-xl font-bold text-white">3</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2 text-green-100">算法设计</h3>
                        <p class="text-green-200 leading-relaxed">设计解决问题的步骤</p>
                    </div>

                    <div class="group bg-white bg-opacity-10 backdrop-blur-sm p-6 rounded-xl border border-white border-opacity-20 hover:bg-opacity-20 transition-all duration-300 hover:transform hover:scale-105 hover:shadow-xl">
                        <div class="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-pink-400 to-pink-600 rounded-full mb-4 group-hover:scale-110 transition-transform duration-300">
                            <span class="text-xl font-bold text-white">4</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-2 text-pink-100">验证与优化</h3>
                        <p class="text-pink-200 leading-relaxed">测试并改进算法</p>
                    </div>
                </div>

                <!-- 关键概念卡片 -->
                <div class="bg-white bg-opacity-10 backdrop-blur-sm p-6 rounded-xl border border-white border-opacity-20">
                    <div class="flex items-center mb-4">
                        <div class="flex items-center justify-center w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full mr-3">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-yellow-200">关键概念</h3>
                    </div>
                    <p class="text-lg leading-relaxed text-white">
                        <span class="font-semibold text-lime-500 drop-shadow-lg">算法</span>是解决问题的一系列明确步骤，
                        <span class="font-semibold text-lime-500 drop-shadow-lg">计算机程序</span>是算法的具体实现。
                    </p>
                    <div class="mt-4 flex items-center text-yellow-200">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                        <span class="text-sm font-medium">掌握这些核心概念，将帮助你更好地理解编程思维！</span>
                    </div>
                </div>
            </div>
        </section>
    </div>
    </div> <!-- 结束tab1-->

    <!-- Tab2: 练习 -->
    <div id="tab2" class="tab-content hidden">
    <!-- 练习内容区域 -->
    <div class="max-w-6xl mx-auto px-4 py-8">
        <!-- 练习标题 -->
        <section class="mb-12 bg-gradient-to-br from-green-100 to-blue-50 rounded-xl shadow-md p-6 border border-green-100">
            <h2 class="text-2xl font-bold text-green-800 mb-4 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                练习内容
            </h2>
            <p class="text-lg text-gray-700 mb-4">通过练习巩固所学知识，动手实践体验算法。</p>
        </section>

        <!-- 练习1：代码编写练习 -->
        <section class="mb-12 bg-cyan-100 rounded-xl shadow-md p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">练习1：体验投票程序代码</h2>
            <p class="text-gray-700 mb-6">请尝试用Python语言编写一个简单的投票程序，实现A、B两个选项的投票功能。</p>

            <div class="bg-blue-100 p-4 rounded-lg mb-6">
                <h3 class="font-semibold text-blue-800 mb-2">代码要求：</h3>
                <ul class="list-disc pl-6 space-y-1 text-blue-700">
                    <li>使用变量存储A和B的票数</li>
                    <li>使用循环让用户多次投票</li>
                    <li>使用if语句判断投票选择</li>
                    <li>投票结束后显示结果</li>
                </ul>
            </div>

            <div class="bg-orange-200 p-4 rounded-lg font-mono text-sm mb-6">
                <p class="text-gray-600 mb-2">示例代码框架：</p>
                <div class="bg-white p-3 rounded border">
                    <pre><code># 初始化票数，a表示作品A的票数，b表示作品B的票数
a = 0
b = 0
# 用变量i控制投票的次数
i = 1
# 投票循环
while i < 6:  # 假设5人投票
    vote = input("输入a投票给作品A，输入b投票给作品B: ")
    if vote == "a":
        a = a + 1
    else:
        b = b + 1

# 输出结果
print("A得票:", a)
print("B得票:", b)</code></pre>
                </div>
            </div>

            <div class="bg-gray-50 p-4 rounded-lg">
                <h3 class="font-semibold text-gray-800 mb-2">请编写你的投票程序代码（假设有10个人投票）：</h3>
                <textarea id="codeExercise" rows="12" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none font-mono text-sm" placeholder="# 请在这里编写你的Python代码
# 初始化变量
# 编写投票逻辑
# 输出结果"></textarea>
                <button id="submitCode" class="mt-4 bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg font-medium transition-colors">
                    提交代码
                </button>
            </div>
        </section>

        <!-- 练习2：算法优化练习 -->
        <section class="mb-12 bg-orange-100 rounded-xl shadow-md p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">练习2：算法优化思考</h2>
            <p class="text-gray-700 mb-6">思考以下问题，并写出你的答案：</p>

            <div class="space-y-6">
                <div class="bg-purple-100 p-4 rounded-lg">
                    <h3 class="font-semibold text-purple-800 mb-2">问题1：如果用户输入的数据既不是a，也不是b，结果会怎样？</h3>
                    <textarea id="question1" rows="4" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none" placeholder="请描述你的思路..."></textarea>
                </div>

                <div class="bg-indigo-100 p-4 rounded-lg">
                    <h3 class="font-semibold text-indigo-800 mb-2">问题2：如果有3个作品参与投票，代码要怎么调整？</h3>
                    <textarea id="question2" rows="4" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent resize-none" placeholder="请描述你的解决方案..."></textarea>
                </div>
            </div>

            <button id="submitAnswers" class="mt-6 bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-lg font-medium transition-colors">
                提交所有答案
            </button>
        </section>
    </div>
    </div> <!-- 结束tab2-->

    <script>
        // 标签栏切换逻辑
        document.querySelectorAll('.tab-btn').forEach(function(btn){
          btn.addEventListener('click', function(){
            document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('tab-active','bg-blue-600','text-white','bg-white','shadow'));
            this.classList.add('tab-active','bg-blue-600','text-white');
            let tab = this.getAttribute('data-tab');
            document.querySelectorAll('.tab-content').forEach(c=>c.classList.add('hidden'));
            document.getElementById(tab).classList.remove('hidden');
          });
        });
        // 默认高亮第一个tab
        document.querySelector('.tab-btn[data-tab="tab1"]').classList.add('tab-active','bg-blue-600','text-white');
        document.getElementById('tab1').classList.remove('hidden');

        // 投票系统功能
        let votesA = 0;
        let votesB = 0;
        const totalVotes = 10;
        
        // 获取DOM元素
        const voteABtn = document.getElementById('voteA');
        const voteBBtn = document.getElementById('voteB');
        const votesADisplay = document.getElementById('votesA');
        const votesBDisplay = document.getElementById('votesB');
        const progressA = document.getElementById('progressA');
        const progressB = document.getElementById('progressB');
        const resetBtn = document.getElementById('resetVotes');
        const submitBtn = document.getElementById('submitAnswer');
        const hintSection = document.getElementById('hintSection');
        const flowchartImage = document.getElementById('flowchartImage');
        const imageModal = document.getElementById('imageModal');
        const closeModal = document.getElementById('closeModal');

        // 学习进度相关元素
        const progressBar = document.querySelector('#mainNav .bg-gradient-to-r');
        const progressText = document.querySelector('#mainNav .text-white.text-sm.font-medium');
        
        // 投票按钮事件监听
        voteABtn.addEventListener('click', () => {
            if (votesA + votesB >= totalVotes) return;
            const isFirstVote = (votesA + votesB) === 0;
            votesA++;

            if (isFirstVote) {
                highlightStep(2); // 第一次投票：获取输入
                setTimeout(() => {
                    highlightStep(3); // 短暂延迟后到处理数据
                    setTimeout(() => updateVoteDisplay(), 800);
                }, 1000);
            } else {
                highlightStep(3); // 后续投票：直接处理数据
                setTimeout(() => updateVoteDisplay(), 800);
            }
        });

        voteBBtn.addEventListener('click', () => {
            if (votesA + votesB >= totalVotes) return;
            const isFirstVote = (votesA + votesB) === 0;
            votesB++;

            if (isFirstVote) {
                highlightStep(2); // 第一次投票：获取输入
                setTimeout(() => {
                    highlightStep(3); // 短暂延迟后到处理数据
                    setTimeout(() => updateVoteDisplay(), 800);
                }, 1000);
            } else {
                highlightStep(3); // 后续投票：直接处理数据
                setTimeout(() => updateVoteDisplay(), 800);
            }
        });

        // 提交答案按钮事件监听
        submitBtn.addEventListener('click', () => {
            const answer = document.getElementById('algorithmAnswer').value.trim();
            if (answer.length > 0) {
                // 显示提示区域
                hintSection.classList.remove('hidden');
                // 禁用提交按钮
                submitBtn.disabled = true;
                submitBtn.textContent = '已提交';
                submitBtn.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
                submitBtn.classList.add('bg-gray-500', 'cursor-not-allowed');
            } else {
                alert('请先输入您的答案再提交！');
            }
        });

        // 重置按钮事件监听
        resetBtn.addEventListener('click', () => {
            votesA = 0;
            votesB = 0;
            updateVoteDisplay();
            highlightStep(1);
            // 隐藏结果和思考问题
            document.getElementById('result').classList.add('hidden');
            document.getElementById('thinkingQuestion').classList.add('hidden');
            // 重置思考问题区域
            document.getElementById('algorithmAnswer').value = '';
            hintSection.classList.add('hidden');
            submitBtn.disabled = false;
            submitBtn.textContent = '提交答案';
            submitBtn.classList.remove('bg-gray-500', 'cursor-not-allowed');
            submitBtn.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
        });
        
        // 更新投票显示
        function updateVoteDisplay() {
            votesADisplay.textContent = votesA;
            votesBDisplay.textContent = votesB;

            const total = votesA + votesB;
            const percentA = total > 0 ? (votesA / total) * 100 : 0;
            const percentB = total > 0 ? (votesB / total) * 100 : 0;

            progressA.style.width = `${percentA}%`;
            progressB.style.width = `${percentB}%`;

            // 只有在非第一次投票时才设置步骤高亮
            if (total > 1 && total < totalVotes) {
                highlightStep(4); // 循环投票过程
            } else if (total === totalVotes) {
                highlightStep(5); // 输出投票结果
                showResult();
            }

            // 禁用按钮如果投票完成
            if (total >= totalVotes) {
                voteABtn.disabled = true;
                voteBBtn.disabled = true;
                voteABtn.classList.add('opacity-50', 'cursor-not-allowed');
                voteBBtn.classList.add('opacity-50', 'cursor-not-allowed');
            } else {
                voteABtn.disabled = false;
                voteBBtn.disabled = false;
                voteABtn.classList.remove('opacity-50', 'cursor-not-allowed');
                voteBBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            }
        }

        // 显示投票结果
        function showResult() {
            const resultDiv = document.getElementById('result');
            const resultText = document.getElementById('resultText');
            const thinkingDiv = document.getElementById('thinkingQuestion');

            if (votesA > votesB) {
                resultText.textContent = `投票结束！A作品以 ${votesA} 票领先，获胜！`;
            } else if (votesB > votesA) {
                resultText.textContent = `投票结束！B作品以 ${votesB} 票领先，获胜！`;
            } else {
                resultText.textContent = `投票结束！A作品和B作品各得 ${votesA} 票，打成平局！`;
            }

            resultDiv.classList.remove('hidden');
            thinkingDiv.classList.remove('hidden');
        }
        
        // 高亮算法步骤
        function highlightStep(stepNumber) {
            // 移除所有步骤的高亮
            const steps = document.querySelectorAll('.flowchart-step');
            steps.forEach(step => {
                step.classList.remove('active');
                step.classList.remove('bg-blue-100');
                step.classList.add('bg-blue-50');
            });
            
            // 高亮当前步骤
            const currentStep = document.getElementById(`step${stepNumber}`);
            if (currentStep) {
                currentStep.classList.add('active', 'bg-blue-100');
            }
        }
        
        // 图片点击事件监听
        flowchartImage.addEventListener('click', () => {
            imageModal.classList.remove('hidden');
        });

        // 关闭模态框事件监听
        closeModal.addEventListener('click', () => {
            imageModal.classList.add('hidden');
        });

        // 点击模态框背景关闭
        imageModal.addEventListener('click', (e) => {
            if (e.target === imageModal) {
                imageModal.classList.add('hidden');
            }
        });

        // ESC键关闭模态框
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && !imageModal.classList.contains('hidden')) {
                imageModal.classList.add('hidden');
            }
        });

        // 页面滚动进度跟踪
        function updateScrollProgress() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const windowHeight = window.innerHeight;
            const documentHeight = Math.max(
                document.body.scrollHeight,
                document.body.offsetHeight,
                document.documentElement.clientHeight,
                document.documentElement.scrollHeight,
                document.documentElement.offsetHeight
            );

            // 计算滚动进度（从0到100）
            const scrollProgress = Math.min(100, Math.max(0,
                ((scrollTop + windowHeight) / documentHeight) * 100
            ));

            // 更新进度条宽度
            if (progressBar) {
                progressBar.style.width = `${scrollProgress}%`;
            }

            // 更新百分比文本
            if (progressText) {
                progressText.textContent = `${Math.round(scrollProgress)}%`;
            }
        }

        // 添加滚动事件监听器
        window.addEventListener('scroll', updateScrollProgress);

        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            updateVoteDisplay();
            highlightStep(1);
            updateScrollProgress(); // 初始化滚动进度
        });
    </script>
</body>
</html>
